<template lang="html">
    <div>
        <div class="head" :style="head">
            <div>
                <div class="user_box">
                    <img :src="$store.state.userInfo.headimgurl" alt="">
                </div>
                <p class="user_name">{{$store.state.userInfo.nickname}}</p>
            </div>
        </div>
        <div class="nav">
            <div class="item">
                <p class="number_p">100 <span>家</span> </p>
                <p>店铺总计</p>
            </div>
            <div class="item">
                <p class="number_p">100 <span>家</span> </p>
                <p>今日推广</p>
            </div>
            <div class="item">
                <p class="number_p">100 <span>分</span> </p>
                <p>赚取积分</p>
            </div>
        </div>
        <div class="hr_box">
        </div>
        <div class="panel">
            <div class="nan">
                好友列表
            </div>
            <div class="nan_box">
                <ul>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                    <li class="list">
                        <div class="friend_img">
                            <img :src="userimg" alt="">
                        </div>
                        <p class="friend_name">小白咪咪小强</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import userimg from '@/assets/lingyi_logo@2x.png'
export default {
    data(){
        return{
            head:{
                backgroundImage: "url(" + require("../../assets/page7_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            }
        }
    },
    metaInfo: {
      title: "我推荐的店铺"
     },
    mounted:function(){
        document.getElementsByTagName("body")[0].className="address_active_bg";
        let that = this;
        let url = that.$store.state.personal_api+"shop_list";
        that.$axios.post(url,{
            access_token:that.$store.state._token01
        })
        .then(function(response){
            console.log(response);
            let res = response.data;
            if(res.status == 1){
                // that.amount = res.data.item.amount;
                // that.commission = res.data.item.commission;
            }
        })
        .catch(function(error){
            console.log(error);
        });
    },
    beforeCreate:function(){
        document.getElementsByTagName("body")[0].className="address_active_bg";
    },
    beforeDestroy: function() {
        document.body.removeAttribute("class","address_active_bg");
    }
}
</script>

<style lang="css" scoped>
.fl{
    display: flex;
}
.head{
    height: 7.96rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head .user_box{
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border:.08rem solid #ffffff;
    box-shadow: 0 0.16rem 0.24rem #1ca48a;
}
.head .user_box img{
    width: 100%;
    height: auto;
}
.head .user_name{
    font-size: .6rem;
    color: #ffffff;
    font-weight: 500;
    margin-top: .22rem;
}
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.42rem;
    background: #FFFFFF;
}
.nav .item{
    flex: 1;
}
.nav .item .number_p{
    font-size: .84rem;
    color: #212121;
    margin-bottom: .14rem;
}
.nav .item .number_p > span{
    font-size: .48rem;
    margin-left: -.15rem;
}
.nav .item > p{
    font-size: .48rem;
    color: #8B8B8B;
}
.hr_box{
    height: .36rem;
    background:rgba(243,244,245,1);
}
.panel{
    overflow: scroll;
    background:rgba(243,244,245,1);
}
.panel .nan{
    padding: 0 .43rem;
    margin: .52rem 0 .12rem 0;
    font-size: .52rem;
    color: #272727;
    text-align: left;
}
.panel .nan_box{
    /* padding:0 .16rem; */
}
.panel .nan_box ul{
    display: flex;
    flex-wrap: wrap;
}
.panel .nan_box ul .list{
    width: 3.68rem;
    height: 2.32rem;
    margin-top: .6rem;
}
.panel .nan_box .list .friend_img{
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 auto;
    border-radius: 50%;
}
.panel .nan_box .list .friend_img img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.panel .nan_box .list .friend_name{
    font-size: .44rem;
    color: #333333;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
    text-align: center;
    margin-top: .16rem;
}

</style>
